<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1">
	<title>Simple Swiper App</title>

	<link rel="stylesheet" href="css/idangerous.swiper.css">
	<link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/simple-app.css">
</head>
<body>
	<div class="swiper-nav swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide"><span>Home</span></div>
			<div class="swiper-slide"><span>About Us</span></div>
			<div class="swiper-slide"><span>Gallery</span></div>
			<div class="swiper-slide"><span>Services</span></div>
			<div class="swiper-slide"><span>Contacts</span></div>
		</div>
	</div>
	<div class="swiper-pages swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<div class="swiper-container scroll-container">
					<div class="swiper-scrollbar"></div>
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="page-inner">
								<h1>Home</h1>
								<p>Hello, this is an example of simple Swiper-app with the following features:</p>
								<ul>
									<li>
										<p>scrollable text pages (with Swiper scroll container) and scrollbar plugin</p>
									</li>
									<li>
										<p>fluid scrollable navigation on the top (with Swiper free mode)</p>
									</li>
									<li>
										<p>gallery page (with Swiper vertical mode)</p>
									</li>
									<li>
										<p>fully responsive</p>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper-container scroll-container">
					<div class="swiper-scrollbar"></div>
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="page-inner">
								<h1>About Us</h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, aliquid dolor quidem harum hic dolore et temporibus quisquam alias ratione nisi ex laboriosam esse nesciunt neque sed quis deleniti maxime.</p>
								<p>Omnis explicabo dicta cupiditate sed minus ipsa laborum aliquid nisi. Ad, consectetur, maiores, culpa quos aliquid atque saepe libero laborum facilis dignissimos consequuntur repellendus inventore totam alias fuga explicabo repudiandae.</p>
								<p>Voluptatibus, est, dignissimos, blanditiis perspiciatis expedita totam reprehenderit voluptates quod impedit autem quam repudiandae iusto libero officia quo ad ullam voluptatum distinctio aperiam nulla dolorem! Cupiditate soluta aut aliquid ipsum!</p>
								<p>Harum, facere, quisquam dignissimos dolorem a ex velit amet ad architecto quos adipisci labore sint nulla. Cum, veniam, molestias, excepturi amet consequuntur vel nobis sed minima officia architecto in vitae.</p>
								<p>Iure, perferendis, porro error sint nisi quo libero laudantium repudiandae architecto sunt itaque accusamus ipsum quas voluptatum iusto modi facere culpa. Culpa, eaque nisi praesentium aspernatur natus distinctio ad nostrum.</p>
								<p>Unde, tenetur porro atque eaque quae repellendus dignissimos doloremque neque quia nulla fugiat quis adipisci rem recusandae eos voluptatem sunt velit natus. Ipsam, facilis molestias animi laboriosam fuga repellat iste.</p>
								<p>Consequuntur, cupiditate, fugiat similique repellat voluptates possimus saepe dolorum rem blanditiis illum! Ducimus, pariatur consequatur nobis neque deleniti quaerat omnis! Quaerat, inventore alias veniam vero repudiandae praesentium necessitatibus reprehenderit sit!</p>
								<p>Illo, nam qui ipsum aperiam possimus similique eaque officia error consectetur omnis nostrum consequuntur dicta libero aspernatur repudiandae. Quos, odit nemo atque et id error excepturi inventore eum. Quia, sequi?</p>
								<p>Nemo, doloribus, consectetur enim sunt cumque quia tenetur fugiat atque repellendus perferendis suscipit quasi ratione repellat deserunt in fuga iste. Et, nobis corporis nemo quo atque at neque consequatur tenetur?</p>
								<p>Nisi, odit, quisquam recusandae aspernatur officia facilis saepe repellendus iusto minima maiores ratione sint nihil esse. Consequatur, alias, labore nam voluptate sequi doloremque nobis quisquam earum eligendi impedit eveniet dolore.</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper-container swiper-gallery">
					<div class="swiper-scrollbar"></div>
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="img/gallery-2.jpg" height="684" width="1024" alt=""></div>
						<div class="swiper-slide"><img src="img/gallery-3.jpg" height="800" width="532" alt=""></div>
						<div class="swiper-slide"><img src="img/gallery-4.jpg" height="800" width="532" alt=""></div>
						<div class="swiper-slide"><img src="img/gallery-5.jpg" height="684" width="1024" alt=""></div>
					</div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper-container scroll-container">
					<div class="swiper-scrollbar"></div>
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="page-inner">
								<h1>Services</h1>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, aliquid dolor quidem harum hic dolore et temporibus quisquam alias ratione nisi ex laboriosam esse nesciunt neque sed quis deleniti maxime.</p>
								<p>Omnis explicabo dicta cupiditate sed minus ipsa laborum aliquid nisi. Ad, consectetur, maiores, culpa quos aliquid atque saepe libero laborum facilis dignissimos consequuntur repellendus inventore totam alias fuga explicabo repudiandae.</p>
								<p>Voluptatibus, est, dignissimos, blanditiis perspiciatis expedita totam reprehenderit voluptates quod impedit autem quam repudiandae iusto libero officia quo ad ullam voluptatum distinctio aperiam nulla dolorem! Cupiditate soluta aut aliquid ipsum!</p>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, aliquid dolor quidem harum hic dolore et temporibus quisquam alias ratione nisi ex laboriosam esse nesciunt neque sed quis deleniti maxime.</p>
								<p>Omnis explicabo dicta cupiditate sed minus ipsa laborum aliquid nisi. Ad, consectetur, maiores, culpa quos aliquid atque saepe libero laborum facilis dignissimos consequuntur repellendus inventore totam alias fuga explicabo repudiandae.</p>
								<p>Voluptatibus, est, dignissimos, blanditiis perspiciatis expedita totam reprehenderit voluptates quod impedit autem quam repudiandae iusto libero officia quo ad ullam voluptatum distinctio aperiam nulla dolorem! Cupiditate soluta aut aliquid ipsum!</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="swiper-slide">
				<div class="swiper-container scroll-container">
					<div class="swiper-scrollbar"></div>
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="page-inner">
								<h1>Contacts</h1>
								<p>You can contact us using the following contacts form:</p>
								<form action="">
									<p><input type="text" name="first" placeholder="First Name..." id=""></p>	
									<p><input type="text" name="last" placeholder="Last Name..." id=""></p>	
									<p><input type="text" name="subject" placeholder="Subject..." id=""></p>	
									<p><textarea name="message" placeholder="Your message..." cols="30" rows="10"></textarea></p>
									<p><input type="submit" value="Send"></p>
								</form>
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="js/jquery.min.js"></script>
	<!-- Don't forget to get the latest Swiper and scrollbar version here-->
	<script src="js/idangerous.swiper-2.0.min.js"></script>
	<script src="js/idangerous.swiper.scrollbar-2.0.js"></script>
	<script src="js/simple-app.js"></script>
</body>
</html>